<template>
	<view class="product-select" :style="{ '--titleSize': titleSize }">
		<view class="title" :style="{ fontSize: titleSize }">{{ title }}</view>
		<view class="option" :style="{ '--col': col, '--color': color, '--clickColor': clickColor, gridColumnGap: colSpan, gridRowGap: rowSpan }">
			<view
				class="select"
				v-for="(item, index) in list"
				:key="index"
				@click="clickThis1(item, index)"
				:class="{ 'click-style': is_inarray(current_list, index) >-1 && isFocus }"
				:style="{ fontSize: optionSize, borderRadius: radius }"
			>
				<view style="position: relative;height: 88px;width: 105px;}" v-if="showImg">
					<!-- <image mode="aspectFill" :src="item[imgSrcKey]" style="width: 100%;height: 100%;"></image> -->
					<view style="position: absolute; height: 40px; width: 40px; background: rgba(0,0,0,0.05); top: 24px; left: 35px;">
						
					</view>
					</view>
			</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
export default {
	name: 'a-my-product-select',
	props: {
		// 图片src的键名
		imgSrcKey: {
			type: String,
			default: 'imgUrl'
		},
		// 回显文字内容的键名
		textKey: {
			type: String,
			default: 'text'
		},
		// 控制选中时是否生效选中样式
		isFocus: {
			type: Boolean,
			default: true
		},
		
		// 是否展示图片
		showImg: {
			type: Boolean,
			default: false
		},
		// 控制每行的最大列数
		col: {
			type: Number,
			validator: num => num >= 2,
			default: 3
		},
		// 回显的数据
		list: {
			required: true,
			type: Array,
			default: () => {
				return ["1:1", "4:3", "3:4","16:9","9:16","3:2"];
			}
		},
		// 当前标题
		title: {
			type: String,
			required: true
		},
		// 标题文字大小
		titleSize: {
			type: String,
			default: '32rpx'
		},
		// 选项字体大小
		optionSize: {
			type: String,
			default: '16rpx'
		},
		// 列间距
		colSpan: {
			type: String,
			default: '30rpx'
		},
		// 行间距
		rowSpan: {
			type: String,
			default: '20rpx'
		},
		// 选项字体颜色
		color: {
			type: String,
			default: '#000000'
		},
		// 点击项颜色
		clickColor: {
			type: String,
			default: '#307acf'
		},
		// 圆角
		radius: {
			type: String,
			default: '4px'
		},
		current_list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		current_values: {
			type: Array,
			default: () => {
				return [];
			}
		},
		select_num: {
			type: String,
			default: "3"
		},
	},
	data() {
		return {
			current: null
		};
	},
	methods: {
		is_inarray(arr,value){
		for(var i = 0; i < arr.length; i++){
			if(value === arr[i]){
				return i;
			}
			}
		return -2;
		},
		clickThis(item, index) {
			this.current = index;
			this.$emit('update:isFocus', true);
			this.$emit('select', item);
		},
		clickThis1(item, index) {
			var current_index = this.is_inarray(this.current_list, index)
			// console.log(current_index)
			var s_num = parseInt(this.select_num)
			if(this.current_list.length <s_num && current_index <-1){
				this.current_list.push(index)
				this.current_values.push(item.value)
				this.$emit('update:isFocus', true);
				this.$emit('select', item);
			}else{
				if(current_index> -1){
					this.current_list.splice(current_index,1)
					this.current_values.splice(current_index,1)
					this.$emit('update:isFocus', true);
					this.$emit('select', item);
					// console.log(this.current_values)
				}
			}
			// console.log(this.current_values)
		}
	}
};
</script>

<style lang="scss" scoped>
.product-select {
	max-height: 310px;
	overflow-y: scroll;
	box-sizing: border-box;
}

.title {
	color: #000000;
	font-weight: bold;
}

.option {
	display: grid;
	grid-template-columns: repeat(var(--col), 1fr);
	margin: 20rpx 0;
}

.select {
	border: 6px solid rgba(229, 229, 229, 1);
	text-align: center;
	color: var(--color);
	background-color: #ffffff;
}

.goods {
	padding: 6rpx 0;
	// width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

}

// 不显示图片时点击选择项的样式
.click-style {
	border-color: var(--clickColor);
	> .goods {
		background-color: #fff;
		color: var(--clickColor);
	}
}

// 显示图片时点击选择项的样式
.click-style > .click-goods {
	background-color: var(--clickColor);
	color: #fff;
}

.tag {
	background-color: #f2f2f2;
}
</style>
